<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <view class="button-sp-area">
                <span>根据位号查阀门操作记录：</span>
                <button class="mini-btn" type="primary" size="mini" @click="searchByValveNumberData">搜索</button>
            </view>
        </view>

        <view class="container">
            <uni-section>
                <view class="example-body">
                    <view class="result-box">
                        <!-- <text>查询阀门为：</text> -->
                    </view>
                    <uni-combox :candidates="candidates" placeholder="请选择本任务阀门" v-model="city"
                        class="combox"></uni-combox>
                </view>
            </uni-section>
        </view>
        <!-- 数据显示区 -->
        <uni-list>
            <view v-for="item in parentData" :key="item.id">

                <uni-list :border="true">

                    <!-- 自定义右侧内容 -->
                    <uni-list-chat :title="item.operateUser"
                        avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
                        :note="item.valvePositionNumber" :time="item.operateTime.toString().substring(0, 10)"
                        badge-positon="left" :badge-text="item.status === 1 ? '开' : '关'">
                        <view class="chat-custom-right">
                            <text class="chat-custom-text">{{ item.operateTime.toString().substring(0, 10) }}</text>
                            <!-- 需要使用 uni-icons 请自行引入 -->
                            <!-- <uni-icons type="star-filled" color="#999" size="18"></uni-icons> -->
                            {{ item.operateTime.toString().substring(11) }}
                        </view>
                    </uni-list-chat>
                </uni-list>
            </view>

        </uni-list>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useValvesStore } from "@/stores/modules/getValvesData";
import type Valves from "@/types/valves";
import { http } from "@/utils/http";
import type ValvesOperationRecord from '@/types/valvesOperationRecord';

// 使用 ref 创建响应式数据
const candidates = ref<string[]>([]);
const city = ref('');
const parentData = ref<ValvesOperationRecord[]>([]);

const valvesStore = useValvesStore();
candidates.value = valvesStore.valvesList;

// 定义事件处理函数
const searchByValveNumberData = async () => {
    // console.log('点击了搜索按钮');

    // console.log(candidates.value);

    // 检查 city.value 是否为空
    if (!city.value) {
        uni.showToast({
            title: '阀门位号不能是空',
            icon: 'none',
            duration: 2000
        });
        parentData.value = [];
        return;
    }

    // 检查 city.value 是否在 candidates.value 中存在
    const isValidCandidate = candidates.value.some(candidate => candidate === city.value);
    if (!isValidCandidate) {
        uni.showToast({
            title: '选择的阀门位号无效，请重新选择',
            icon: 'none',
            duration: 2000
        });
        parentData.value = [];
        return;
    }
    //发送请求
    const res = await http<any>({
        url: '/valve/getOperationValveDataByValveNumber',
        method: 'GET',
        data: { valvePositionNumber: city.value } // 将参数放在 data 中作为表单数据
    });
    console.log('搜索结果：', res);

    console.log(res.data);
    parentData.value = res.data;
};
</script>

<style lang="scss">
.text {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

.uni-px-5 {
    padding-left: 10px;
    padding-right: 10px;
}

.uni-pb-5 {
    padding-bottom: 10px;
}

.button-sp-area {
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
    justify-content: space-evenly;
    margin: 20rpx 25rpx;
}

.chat-custom-right {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.chat-custom-text {
    font-size: 12px;
    color: #999;
}
</style>